<template>
  <div class="moreText">
    <div
      class="content"
      v-if="businessScopeAllFlag"
      :class="divClass"
      ref="longtxtRef1"
    >
      {{ content }}
    </div>
    <span class="more-btn" @click="getMoreAll" v-if="businessScopeAllFlag1 && content.length > 10"
      >查看更多</span
    >
    <div v-if="!businessScopeAllFlag">
      {{ content }}
    </div>
    <span class="more-btn" @click="getResize" v-if="!businessScopeAllFlag"
      >收起</span
    >
  </div>
</template>
<script>
export default {
  name: "moreText",
  props: {
    line: {
      type: Number,
      default: 2
    },
    content: {
      type: String,
      default:
        "两行文字两行文字两行文字两行文字两行文字两行文字两行文字两行文字两行文字两行文字两行文字两行文字两行文字两行文字两行文字两行文字两行文字两行文字两行文字两行文字两行文字两行文字"
    }
  },
  data() {
    return {
      businessScopeAllFlag: true,
      businessScopeAllFlag1: false,
      divClass: ""
    };
  },
  methods: {
    getMoreAll() {
      this.businessScopeAllFlag = false;
      this.businessScopeAllFlag1 = false;
    },
    getResize() {
      this.businessScopeAllFlag = true;
      this.businessScopeAllFlag1 = true;
      this.divClass = "longTxt";
    },
    getHeight() {
      let divStyle = this.$refs.longtxtRef1.getBoundingClientRect().height;
      console.log("divStyle", divStyle);
      if (parseInt(divStyle) > 60) {
        this.businessScopeAllFlag1 = true;
        this.divClass = "longTxt";
      }
    }
  },
  watch: {
    content: {
      handler: function(val) {
        if (val) {
          this.$nextTick(() => {
            this.getHeight();
          });
        }
      },
      immediate: true
    }
  }
};
</script>
<style lang="scss">
@import "~@/config/styles/variables";
.moreText {
  position: relative;
  .content {
    word-break: break-all;
  }
  .more-btn {
    font-size: 13px;
    color: $--color-more;
    float: right;
    cursor: pointer;
  }
  .longTxt {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    //margin-bottom: 10px;
  }
}
</style>
